(function callee(){
	var FORM_WIDTH = 780;
    view.AboutYourself = Ext.extend(Object, {
		
        constructor: function(){
            this.m_oApplicantHeader = new Ext.form.Label({
                html: "<div class='form-header'>Please tell us about yourself</div>"
            });
            constructFormElementsApplicant.call(this);
            constructFormElementsCoApplicant.call(this);
            
            //noformat
            var aApplicantItems = [{
                items: [this.m_oFullName, this.m_oDateBirth, 
						this.m_oCoApplicantFullName, this.m_oCoApplicantDateBirth,
						this.m_oPets1]
            }, {
                items: [this.m_oHomePhone, this.m_oOtherPhone,
						this.m_oCoApplicantHomePhone, this.m_oCoApplicantOtherPhone,
						this.m_oPets2]
            }, {
                items: [this.m_oEmailAddress, this.m_oSocialSecurity,
						this.m_oCoApplicantEmailAddress, this.m_oCoApplicantSocialSecurity,
						this.m_oPets3]
            }];
			var aDependendItems = constructDependentItems.call(this, false);
			//format
			aApplicantItems.push(aDependendItems);
			//aApplicantItems.push(oPets);
            this.m_oApplicant = constructPanel(aApplicantItems);
            
            this.m_oBackingObject = new Ext.Panel({
                border: false
            });
            this.m_oBackingObject.add(this.m_oApplicantHeader);
            this.m_oBackingObject.add(this.m_oApplicant);
        },
		
		addDependItems : function(){
			//noformat
			var aDependendItems = constructDependentItems.call(this, true),
				o_dependend = constructPanel(aDependendItems);
			//format
			this.m_oBackingObject.add(o_dependend);	
			this.m_oBackingObject.doLayout();
			
			Ext.get(o_dependend.id).on("click", function(){o_dependend.destroy()}, this, {
				id: o_dependend.id,
				delegate: '.remove-dependend-link'
			});
		}
    });
    
    function constructPanel(p_aItems){
        return new Ext.Panel({
            labelAlign: 'left',
            border: false,
            items: [{
                layout: 'column',
                border: false,
                defaults: {
                    columnWidth: .33,
                    layout: 'form',
                    border: false,
                    defaults: {
                        anchor: '95%',
						allowBlank:false,
                        xtype: 'textfield'
                    }
                },
                items: p_aItems
            }]
        });
    }
    
    function constructFormElementsApplicant(){
        this.m_oFullName = {
            fieldLabel: "Full Name",
            name: "fullName"
        };
        this.m_oHomePhone = {
            fieldLabel: "Home Phone",
            name: "homePhone",
            emptyText: '(999) 999-9999'
        };
        this.m_oDateBirth = {
            fieldLabel: "Date of Birth",
            name: "dateBirth",
            emptyText: '07/21/1982'
        };
        this.m_oSocialSecurity = {
            fieldLabel: "Social Security",
            name: "socialSecurity",
            emptyText: '123-45-6789'
        };
        
        this.m_oEmailAddress = {
            fieldLabel: "Email Address",
            name: "emailAddress",
			vtype: "email"
        };
        this.m_oOtherPhone = {
            fieldLabel: "Other Phone",
            name: "otherPhone",
            emptyText: '(999) 999-9999'
        };
		this.m_oPets1 = {
			xtype: "textfield",
			fieldLabel: "Pet 1",
			name: "pet1"
		};
		this.m_oPets2 = {
			xtype: "textfield",
			fieldLabel: "Pet 2",
			name: "pet2"
		};
		this.m_oPets3 = {
			xtype: "textfield",
			fieldLabel: "Pet 3",
			name: "pet3"
		};
    }
    
    function constructFormElementsCoApplicant(){
        this.m_oCoApplicantFullName = {
            fieldLabel: "Co-Applicant Full Name",
            name: "coApplicantFullName"
        };
        this.m_oCoApplicantHomePhone = {
            fieldLabel: "Co-Applicant Home Phone",
            name: "coApplicantHomePhone",
            emptyText: '(999) 999-9999'
        };
        this.m_oCoApplicantDateBirth = {
            fieldLabel: "Co-Applicant Date of Birth",
            name: "coApplicantDateBirth",
            emptyText: '07/21/1982'
        };
        this.m_oCoApplicantSocialSecurity = {
            fieldLabel: "Co-Applicant Social Security",
            name: "coApplicantSocialSecurity",
            emptyText: '123-45-6789'
        };
        
        this.m_oCoApplicantEmailAddress = {
            fieldLabel: "Co-Applicant Email Address",
            name: "coApplicantEmailAddress"
        };
        this.m_oCoApplicantOtherPhone = {
            fieldLabel: "Co-Applicant Other Phone",
            name: "coApplicantOtherPhone",
            emptyText: '(999) 999-9999'
        };
    }
    
    function constructDependentItems(p_bRemoveLink){
		//noformat
        var oDependendFullName = {
            fieldLabel: "Dependend Full Name",
            name: "dependendFullName",
            xtype: 'textfield'
        }, 
		oDependendBirthDate = {
            fieldLabel: "Dependend Date of Birth",
            name: "dependendDateBirth",
            xtype: 'textfield'
        }, 
		oAddDependend = {
            html: "<a href='#' id='dependend-link' class='add-dependend-link'>Add Dependend</a>",
            xtype: "label",
			anchor: '55%'
        },
		oRemoveDependend = {
            html: String.format("<a href='#' class='remove-dependend-link'>Remove Dependend</a>"),
            xtype: "label",
			anchor: '55%'
        };
		//format
        return [{
            items: [oDependendFullName]
        }, {
            items: [oDependendBirthDate]
        }, {
            items: [p_bRemoveLink ? oRemoveDependend : oAddDependend]
        }];
    }
})();


